<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>系统</title>
    <style type="text/css">

    </style>

    <script src="/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div align="center">
    <h1>系统信息</h1>
    <form th:action="@{/system/list}" method="get">
        <select name="unitId" id="unit">
            <option value="0">--请选择--</option>
            <option th:each="u : ${ulist}" th:selected="${area.unitId eq u.id}" name="id" th:value="${u.id}" th:text="${u.unitName}"></option>
        </select>
        <select name="id" id="area">
            <option value="0">--请选择--</option>
            <option th:each="un : ${arealist}"  th:selected="${area.id eq un.id}" name="id" th:value="${un.id}" th:text="${un.areaName}"></option>
        </select>
        <input type="submit" value="搜索" />
        <a id="add" th:href="@{/system/add}">添加系统信息</a>
    </form>

    <table>
        <tr style="background-color:#ADD8E6">
            <th>系统ID</th>
            <th>系统编码</th>
            <th>系统名称</th>
            <th>系统KKS编码</th>
            <th>是否主系统</th>
            <th>主系统编码</th>
            <th>区域名称</th>
            <th>机组名称</th>
            <th>执行操作</th>
        </tr>
        <tr id="list" th:each="al : ${sy}">
            <td style="text-align: center" th:text="${al.id}"></td>
            <td th:text="${al.systemCode}"></td>
            <td th:text="${al.systemName}"></td>
            <td th:text="${al.systemKKS}"></td>
            <td th:text="${al.ismainSystem}"></td>
            <td th:text="${al.mainSystem}"></td>
            <td th:text="${al.areaName}"></td>
            <td th:text="${al.unitName}"></td>

            <td>
                <a th:href="@{/system/delete/{Id}(Id=${al.id})}">删除</a>
                <a th:href="@{/system/update/{Id}(Id=${al.id})}">修改</a>
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        $("#unit").change(
            function () {
                var unitId = $("#unit").val();
                if(unitId ==""){
                    return;
                }
                $.ajax({
                    cache:true,
                    type:"get",
                    url:"/system/get_area",
                    data:{"unitId":unitId},
                    success:function (data) {
                        console.log(data);
                       var area = $("#area").empty();
                       var list = data;
                        area.append("<option value="+0+">--请选择--</option>")
                       for(var i=0;i<list.length;i++){
                           area.append("<option selected='"+list[i].id+"' value='"+list[i].id+"'>"+list[i].areaName+"</option>");
                           console.log(list[i].id);
                       }

                        // return data;
                    },error:function (error) {
                        alert("获取数据失败，请重新刷新")
                    }
                })
            }
        )
    </script>
</div>
</body>
</html>